/**
 * [中奖记录]
 */
<template>
    <div>
        <div
            style="display: flex"
        >
            <el-select v-model="type" placeholder="请选择" class="filter">
                <!-- <el-option label="用户昵称" value="user_name"></el-option> -->
                <el-option label="用户手机" value="mobile"></el-option>
                <el-option label="用户ID" value="user_id"></el-option>
            </el-select>
            <div class="search"
                style="margin-left: 20px"
            >
                <el-input placeholder="请输入内容" @keyup.enter.native="onSearch" v-model.trim="keyword">
                    <i slot="prefix" class="el-input__icon el-icon-search"></i>
                </el-input>
            </div>
        </div>
        <el-table :data="tableData" border style="margin-top:20px;" v-loading="loading">
            <el-table-column prop="id" label="ID" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="lottery_name" label="名称" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="user_name" label="用户" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <div class="userHead">
                        <router-link :to="`/user/detail/${scope.row.user_id}`" class="blue">
                            <img :src="scope.row.avatar" alt="" class="square">
                            {{scope.row.nickname}}
                        </router-link>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="time" label="中奖时间" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    {{scope.row.create_time | dateFormat}}
                </template>
            </el-table-column>
            <el-table-column prop="admin_name" label="发货人" :show-overflow-tooltip="true">

            </el-table-column>
            <el-table-column prop="remark" label="风控" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <span v-if="scope.row.remark">{{scope.row.remark}}</span>
                    <span v-else> - </span>
                </template>
            </el-table-column>
            <el-table-column prop="status" label="状态" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <font v-if="scope.row.status==0" class="gray">待领取</font>
                    <font v-if="scope.row.status==1" class="green">待发货</font>
                    <font v-if="scope.row.status==2" class="red">已发货</font>
                    <font v-if="scope.row.status==3" class="red">已完成</font>
                    <font v-if="scope.row.status==4" class="red">拒绝发货</font>
                </template>
            </el-table-column>
            <el-table-column prop="btn" label="操作" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <a v-if="scope.row.status==1" class="btn blue" @click="goShipping(scope.$index)">发货</a>
                    <a v-else-if="scope.row.status > 2" class="btn gray" @click="seeShipping(scope.$index)">查看</a>
                    <a v-else > - </a>
                </template>
            </el-table-column>
        </el-table>
        <div class="paginationBlock">
            <el-pagination @current-change="changePage" layout="prev, pager, next, total" :total="count" :current-page="page" :page-size="pageSize" hide-on-single-page></el-pagination>
        </div>

        <el-dialog title="提示" :visible.sync="handleShow" width="500px">
            <el-form label-position="left" v-if="shippingInfo" v-loading="dialogLoading">
                <el-form-item label="商品名称">{{shippingInfo.lottery_name}}</el-form-item>
                <el-form-item :label="item.title" :key="index" v-for="(item, index) in shippingInfo.content">{{item.value}}</el-form-item>
                <el-form-item label="处理">
                    <el-radio-group v-model="shippingStatus" @change="onShippingChange">
                        <el-radio :label="3">发货</el-radio>
                        <el-radio :label="4">拒绝发货</el-radio>
                    </el-radio-group>
                    <el-input v-model.trim="shippingRemark" style="margin-top:15px;"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="handleShow = false">取 消</el-button>
                <el-button type="primary" @click="onShipping">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 查看发货状态详情 -->
        <el-dialog title="发货详情" :visible.sync="shippingLog" width="500px">
            <el-form label-position="left" v-if="shippingInfo">
                <el-form-item label="商品名称">{{shippingInfo.lottery_name}}</el-form-item>
                <el-form-item :label="item.title" :key="index" v-for="(item, index) in shippingInfo.content">{{item.value}}</el-form-item>
                <el-form-item label="处理结果:">
                    <font v-if="shippingInfo.status==0" class="gray">待领取</font>
                    <font v-if="shippingInfo.status==1" class="green">待发货</font>
                    <font v-if="shippingInfo.status==2" class="red">已发货</font>
                    <font v-if="shippingInfo.status==3" class="red">已完成</font>
                    <font v-if="shippingInfo.status==4" class="red">拒绝发货</font>
                    <div>{{shippingInfo.send_notes}}</div>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="closeShippingLog">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import fetch from '@/api/axios';
import {tsToDateFormat} from '@/utils/tsToDateFormat';
const shippingTxts = ['','','', '恭喜您，您的商品已成功发货，请注意查收。', '很遗憾的告诉您，您的商品未能发货，原因：暂无。'];
export default {
    data(){
        return {
            handleShow: false,
            loading: false,
            dialogLoading: false,
            shippingLog: false,
			page: 1,
			pageSize: 10,
			count: 0,
            tableData: [],
            shippingStatus: 3,
            shippingRemark: shippingTxts[3],
            
            shippingInfo: null,
            oderIndex: 0,
            type: 'user_id',
            keyword: ''
        }
    },
    filters: {
		dateFormat(t){
			return tsToDateFormat(t, 'yyyy-MM-dd hh:mm');
		},
	},
    created(){
        this.getList();
    },
    methods: {
        getList(){
			let _this = this;
            this.loading = true;
            let resPar = {
                page: _this.page
            }
            if (this.keyword) {
                resPar.type = this.type;
                resPar.keyword = this.keyword;
            }
			fetch.get('/api/console/lottery/index',resPar).then((res)=>{
				let data = res.data;
				if(data.code == 0){
					_this.count = data.data.count;
					_this.pageSize = data.data.pagesize;
					_this.tableData = [...data.data.list];
				}else{
					_this.$message.error(data.message);
				}
			}).catch((err)=>{
				_this.$message.error(err.message);
			}).finally(()=>{
				_this.loading = false;
			});
		},
		changePage(page){
			this.page = page;
			this.getList();
        },
        goShipping(index){
            this.shippingInfo = this.tableData[index];
            this.handleShow = true;
        },
        seeShipping(index){
            this.shippingInfo = this.tableData[index];
            this.shippingLog = true;
        },
        closeShippingLog(){
            this.shippingLog = false;
            this.shippingInfo = null;
        },
        onShippingChange(val){
			this.shippingStatus = val;
			this.shippingRemark = shippingTxts[val];
		},
		onShipping(){
			this.handleShow = false;
			this.dialogLoading = true;
			fetch.post('/api/console/lottery/prize_send',{
				id: this.shippingInfo.id,
				status: this.shippingStatus,
				remark: this.shippingRemark
			}).then((res)=>{
				let data = res.data;
				if(data.code == 0){
                    this.$message.success('操作成功');
                    this.shippingInfo = null;
                    this.shippingStatus = 2;
                    this.shippingRemark = '';
					this.getList();
				}else{
					this.$message.error(data.message);
				}
			}).catch((err)=>{
				this.$message.error(err.message);
			}).finally(()=>{
				this.dialogLoading = false;
			});
        },
        onSearch() {
            this.getList();
        }
    },
}
</script>
<style lang="scss" scoped>
a.btn{
    cursor: pointer;
}
</style>
